<template>
    <!-- 不及格名单 -->
    <div class="bottomList fail">
      <!-- 筛选 --- 导出 -->
      <div class="failHeader">
        <div class="title">
          <div>
            <img src="../../assets/imgs/icon/icon_sycxmx.png" alt="">
          </div>
          <span>不及格名单</span>
        </div>
        <div class="failSrceen">
          <div class="hLeft">
            <el-select v-model="commentVal" placeholder="待点评">
              <el-option
                v-for="item in comment"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="weightVal" placeholder="超重">
              <el-option
                v-for="item in weight"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="graderVal" placeholder="全部年级">
              <el-option
                v-for="item in allGrader"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button>搜索</el-button>
          </div>
          <div class="hRight">
            <el-button>重置搜索</el-button>
            <el-button>导出名单</el-button>
          </div>
        </div>
      </div>
      <!-- 内容主体 -->
      <div class="conBody">
        <!-- 多选列表 -->
        <el-table
          :data="failTableData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="grade"
            label="年级">
          </el-table-column>
          <el-table-column
            prop="jump"
            label="立定跳远(米)">
          </el-table-column>
          <el-table-column
            prop="eightH"
            label="800(米)">
          </el-table-column>
          <el-table-column
            prop="oneT"
            label="1000米(秒)">
          </el-table-column>
          <el-table-column
            prop="curl"
            label="仰卧起坐(个)">
          </el-table-column>
          <el-table-column
            prop="yinti"
            label="引体向上(个)">
          </el-table-column>
          <el-table-column
            prop="feihuol"
            label="肺活量">
          </el-table-column>
          <el-table-column
            prop="BMI"
            label="BMI">
          </el-table-column>
          <el-table-column
            prop="dianqiu"
            label="正手垫球">
          </el-table-column>
          <el-table-column
            prop="shemen"
            label="定点射门">
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                type="primary"
                @click="toEdit(scope.row.id)"
              >操作</el-button> -->
              <el-select v-model="operVal" @change="changeFail(scope.row.id)" placeholder="操作">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            // 不及格名单---------------------------
            // 待点评
            comment: [],
            commentVal: '',
            // 超重
            weight: [],
            weightVal: '',
            // 年级
            allGrader: [],
            graderVal: '',
            failTableData: []
        }
    }
}
</script>

<style lang="scss" scoped>
  // 不及格名单
  .fail {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: none;
    height: 4.6875rem;
    width: 100%;
    padding: 0.1771rem 0.1458rem;
    position: relative;
      .failHeader {
      padding: 0 0 0.1302rem;
      .title {
        display: flex;
        flex-direction: middle;
        div {
          img {
            width: 0.125rem;
            height: 0.125rem;
          }
        }
        span {
          font-size: 0.0938rem;
          font-weight: 600;
          color: #525252;
        }
      }
      .failSrceen {
        display: flex;
        justify-content: space-between;
        margin-top: 0.1615rem;
        .hLeft {
          display: flex;
          flex-direction: middle;
          /deep/.el-input--medium .el-input__inner, .el-input--suffix .el-input__inner, .el-select .el-input__inner {
            background-color: #f7fbfc;
            height: 0.2188rem;
            width: 0.7396rem;
            border-radius: 0.0521rem;
          }
          .el-select {
            margin-right: 0.1042rem;
          }
          .el-button {
            width: 0.4479rem;
            height: 0.2188rem;
            background: #0FDD8D;
            border-radius: 0.0521rem;
            font-size: 0.0833rem;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 0.1146rem;
            padding: 0;
          }
        }
        .hRight {
          .el-button {
            width: 0.7396rem;
            height: 0.2188rem;
            border-radius: 0.0521rem;
          }
          .el-button:nth-child(1) {
            background: #F7FBFC;
            color: #525252;
          }
          .el-button:nth-child(2) {
            background: #0FDD8D;
            color: #FFFFFF;
          }
        }
      }
    }
    // 内容区
    .conBody {
      .el-table {
        /deep/.el-input--medium .el-input__inner, .el-input--suffix .el-input__inner, .el-select .el-input__inner {
          width: 0.4479rem;
          height: 0.1875rem;
          background: #F8F8F8;
          border-radius: 0.0938rem;
          padding: 0 0.1042rem 0 0.1302rem;
          color: #888888;
        }
        /deep/.el-input__suffix {
          display: none;
        }
      }
    }
  }
</style>